<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/ui-base.css">
    <link rel="stylesheet" href="../css/detail.css">
    <script src="../js/cookie.js"></script>
    <script src="../js/ajax.js"></script>
    <script src="../js/interface.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        li {
            list-style: none;
        }

        .w {
            width: 1226px;
            margin: 0 auto;
        }

        .tips {
            width: 1226px;
            margin: 0 auto;
        }

        .cl::after {
            content: "";
            display: block;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .tips a {
            font-size: 14px;
        }


        .wrapAll {
            margin-top: 100px;
            /* background-color: grey; */
        }

        .wrapInner {
            width: 400px;
            height: 400px;
            border: 1px solid #333;
            position: relative;
        }

        .wrapInner img {
            width: 100%;
            height: 100%;
        }

        .shadow {
            width: 200px;
            height: 200px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            display: none;
        }

        .left {
            width: 400px;
            background-color: pink;
            float: left;
            margin-right: 50px;
        }

        .right {
            background-color: pink;
            overflow: hidden;
            min-height: 400px;
            padding: 0 10px;
        }

        .scaleBar {
            width: 400px;
            height: 400px;
            background-color: rgba(122, 255, 255, 0.6);
            position: relative;
            /* overflow: hidden; */
            display: none;
        }

        .scaleBar img {
            position: absolute;
            /* z-index: -1; */
            width: 800px;
            height: 800px;
        }

        .goodsInfo {
            font-size: 12px;
        }

        .goodsInfo .sku-name {
            font-weight: bolder;
            font-size: 16px;
        }

        .goodsInfo>* {
            margin-top: 5px;
        }

        .switchList {
            display: flex;
            margin-top: 10px;
            padding: 5px auto;
        }

        .switchList li {
            flex: 1;
        }

        .switchList li+li {
            margin-left: 10px;
        }

        .switchList li img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="tips">
        <a href="./login.html">请登录</a>
        <a href="./register.html">免费注册</a>
    </div>
    <div class="wrapAll w cl">
        <div class="left">
            <div class="wrapInner">
                <div class="shadow"></div>
                <img class="smallImg"
                    src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg"
                    alt="">
            </div>
            <ul class="switchList">
                <!-- <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                <li><img src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg   "
                        alt=""></li>
                -->
            </ul>
        </div>
        <div class="right">
            <!-- <div class="scaleBar">
                <img class="bigImg"
                    src="https://img10.360buyimg.com/n1/s450x450_jfs/t1/125191/18/16011/44383/5f918209Ea135c062/01e7f9899dc4805f.jpg"
                    alt="">
            </div>
            <div class="goodsInfo">
                <div class="sku-name">
                    华为 HUAWEI Mate 40 Pro麒麟9000 5G SoC芯片 超感知徕卡电影影像 66W有线超级快充8GB+256GB秋日胡杨5G全网通套餐二（含充电器和数据线）
                </div>
                <div class="summary">
                    京 东 价: <span>￥ 6999.00</span> 降价通知
                </div>
                <div class="wrap-input">
                    <a href="javascript:;" class="reduce">-</a>
                    <input type="number" class="count-input" value="1">
                    <a href="javascript:;" class="add">+</a>
                </div>
                <div class="buyGoods">
                    <button class="addToShoppingCar">加入购物车</button>
                </div>
            </div> -->
        </div>
    </div>
    <div class="goodsDetail w">

    </div>
</body>
<script>
    // lgc 标识用户身份
    var tips = document.getElementsByClassName("tips")[0];
    var user = getCookie("lgc");
    if (user) {
        tips.innerHTML = `欢迎您,${user} <button onclick="exit()">退出</button>`
    }

    // var search = location.search;
    // if (!search) {  // search == ""
    //     location.href = "./goodsList.html";
    // }

    var leftDiv = document.getElementsByClassName("left")[0];
    var rightDiv = document.getElementsByClassName("right")[0];
    var detailDiv = document.getElementsByClassName("goodsDetail")[0];

    var url = urlParse();  // {}
    console.log(url);
    if (!url.gid) { // 如果不传gid
        location.href = "./goodsList.html";
    }


    $.ajax({
        type: "get",
        url: "../php/searchGoodsByGoodsId.php",
        data: { gid: url.gid },
        dataType: "json",
        success: function (result) {
            console.log(result);
            var { status, detail, data } = result;
            if (status) {
                var { id, goodsId, goodsName, goodsImg, goodsPrice, smallPicList, bigPicList, goodsDetail } = data;
                // left
                // leftDiv.innerHTML = `
                //         <div class="wrapInner">
                //         <div class="shadow"></div>
                //         <img class="smallImg"
                //             src="${goodsImg}"
                //             alt="">
                //     </div>`;

                var smallImg = leftDiv.getElementsByClassName("smallImg")[0];
                smallImg.src = goodsImg;
                var switchList = leftDiv.getElementsByClassName("switchList")[0];

                var html = "";
                var len = smallPicList.length > 6 ? 6 : smallPicList.length;
                for (var i = 0; i < len; i++) {
                    var img = smallPicList[i];
                    html += `<li><img src="${img}" alt=""></li>`;
                }
                switchList.innerHTML = html;


                // right 
                rightDiv.innerHTML = `
                    <div class="scaleBar">
                    <img class="bigImg"
                        src="${goodsImg}"
                        alt="">
                </div>
                <div class="goodsInfo">
                    <div class="sku-name">
                        ${goodsName}
                    </div>
                    <div class="summary">
                        京 东 价: <span>￥ ${goodsPrice}</span> 降价通知
                    </div>
                    <div class="wrap-input">
                        <a href="javascript:;" class="reduce">-</a>
                        <input type="number" class="count-input" value="1">
                        <a href="javascript:;" class="add">+</a>
                    </div>
                    <div class="buyGoods">
                        <button class="addToShoppingCar">加入购物车</button>
                    </div>
                </div>`

                detailDiv.innerHTML = goodsDetail;

                // 加入购物车
                var addBtn = document.getElementsByClassName("addToShoppingCar")[0];
                addBtn.onclick = async function () {
                    console.log("准备加入购物车");

                    // 加入购物车  需要知道的信息
                    // 谁?             (谁的账号就是谁卖的)
                    // 买了什么东西?    (每一件商品都有唯一的编号 (id,gid))
                    // 买了几件? 

                    // 谁?  
                    // 1. 加入购物车之前,需要判断用户是否登录?  
                    // 有lgc  登录  => 加入购物车
                    // 没有lgc  没有登录  => 滚去登录 

                    var countInput = document.getElementsByClassName("count-input")[0];

                    var user = getCookie("lgc");
                    var gId = url.gid;
                    console.log(url);
                    var buyNum = countInput.value;

                    if (user) {  // 有lgc  登录  => 加入购物车
                        // 加入购物车   (谁? 买了什么东西? 买了多少件)
                        var result = await addToShoppingCar({ user, gId, buyNum });
                        console.log(result);
                        var { status, detail } = result;
                        if (status) {
                            if (confirm("加入成功,是否进入购物车?")) {
                                location.href = "shoppingCar.html";
                            }
                        } else {
                            alert(detail);
                        }

                    } else {  // 没有lgc  没有登录  => 滚去登录   

                        // 问题?  
                        // 详情页  => 登录页  => 主页  (期望:从哪里来,回哪里去  回到详情页)

                        // 怎么解决?
                        // 详情页  => 登录页 拼接一个returnUrl记录当前详情页地址   


                        location.href = "./login.html?returnUrl=" + encodeURIComponent(location.href);
                    }

                }


            } else {
                location.href = "./goodsList.html";
            }


        }
    })











    function exit() {
        delCookie("lgc");
        location.reload();
    }




</script>

</html>